<template>
    <div id="page">
        <div id="main">
            <div id="right">
                <template v-if="tf && message !== 3">
                    <Authoritems :authors="authors" :mess="mess" @change="onchange"></Authoritems>
                </template>
                <template v-if="message === 3">
                    <div>
                        <Author :author="author.id" @change="onchangeAuthor" />
                    </div>
                </template>
            </div>
        </div>
    </div>
</template>

<style src="../style/pageshow.css" scoped></style>

<script>
import { authors } from "../data/authors";
import Authoritems from '../components/authoritems.vue';
import Author from '../components/Author.vue';

export default {
    name: 'PageShow1',
    components: {
        Authoritems,
        Author
    },
    data() {
        return {
            authorname: this.$route.params.authorname ? this.$route.params.authorname : null,
            mess: '',
            author: {}, // Initialize as an empty object
            tf: true,
            authors1: null,
            message: null,
        }
    },
    watch: {
        tf(newValue) {
            console.log('tf changed:', newValue);
        },
        message(newValue) {
            console.log('message changed:', newValue);
        }
    },
    computed: {
        authors: () => authors,
        num() {
            return this.authors1 == null ? this.authors.length : this.authors1.length;
        }
    },
    created() {
        if (this.message == 6) { this.tf = !this.tf; }
        console.log('2. 创建之后触发');
    },
    mounted() {
        this.query();
    },
    methods: {
        query() {
            // Implementation of query if needed
        },
        onchange(author) {
            this.author = author;
            this.message = 3;
            this.tf = !this.tf;
        },
        getMessage(data) {
            console.log(1);
            this.message = 3;
            console.log(this.message);
        },
        onchangeAuthor(author) {
            console.log('Selected author:', author);
            this.author = author;
            this.message = 3;
            this.tf = 0;
            console.log(this.message);
            console.log(this.tf);
        }
    }
}
</script>


